@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>智能分析中心</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <style>
        /* 全局样式与科技风格 */
        body {
            background-color: #0a1929;
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
            color: #e6f7ff;
            overflow-x: hidden;
            position: relative;
        }
        
        /* 背景网格效果 */
        .tech-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(8, 26, 45, 0.6) 1px, transparent 1px),
                linear-gradient(90deg, rgba(8, 26, 45, 0.6) 1px, transparent 1px);
            background-size: 30px 30px;
            background-position: center center;
            z-index: -2;
            pointer-events: none;
        }
        
        /* 背景发光效果 */
        .glow-effect {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        
        .glow-effect::before,
        .glow-effect::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            opacity: 0.3;
            filter: blur(100px);
        }
        
        .glow-effect::before {
            background: radial-gradient(circle, #0288D1, transparent 60%);
            top: 10%;
            right: 20%;
            animation: float 15s infinite alternate;
        }
        
        .glow-effect::after {
            background: radial-gradient(circle, #01579B, transparent 60%);
            bottom: 20%;
            left: 10%;
            animation: float 20s infinite alternate-reverse;
        }
        
        @@keyframes float {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(50px, 30px);
            }
        }
        
        /* 数据流动动画 */
        .data-flow {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: -1;
        }
        
        .data-particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: rgba(33, 150, 243, 0.5);
            border-radius: 50%;
            box-shadow: 0 0 3px #29B6F6;
        }
        
        /* 霓虹效果 */
        .neon-border {
            position: relative;
        }
        
        .neon-border::after {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: 9px;
            background: linear-gradient(45deg, #00b0ff, #3d5afe, #651fff, #00e5ff);
            z-index: -1;
            filter: blur(3px);
            opacity: 0.5;
            transition: opacity 0.3s ease;
        }
        
        .neon-border:hover::after {
            opacity: 0.8;
        }
        
        /* 欢迎页容器 */
        .welcome-container {
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }
        
        /* 页面标题 */
        .welcome-header {
            margin-bottom: 25px;
            border-bottom: 1px solid rgba(102, 204, 255, 0.2);
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .welcome-title {
            font-size: 24px;
            color: #2196F3;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
            letter-spacing: 1px;
            margin: 0;
        }
        
        .welcome-subtitle {
            font-size: 14px;
            color: #81D4FA;
            opacity: 0.8;
        }
        
        .welcome-time {
            font-size: 16px;
            color: #4FC3F7;
        }
        
        /* 统计卡片样式 */
        .stats-card {
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: linear-gradient(135deg, rgba(15, 40, 70, 0.8), rgba(10, 25, 41, 0.8));
            border-radius: 8px;
            border: 1px solid rgba(102, 204, 255, 0.2);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }
        
        .stats-card::before {
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
            bottom: -50px;
            right: -50px;
            border-radius: 50%;
        }
        
        .stats-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 149, 255, 0.3);
            border-color: rgba(102, 204, 255, 0.5);
        }
        
        .stats-icon {
            font-size: 36px;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(33, 150, 243, 0.6);
        }
        
        .stats-value {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 5px;
            color: #E1F5FE;
        }
        
        .stats-period {
            font-size: 14px;
            color: #B3E5FC;
        }
        
        .stats-card.weekly .stats-icon {
            color: #29B6F6;
        }
        
        .stats-card.monthly .stats-icon {
            color: #26C6DA;
        }
        
        .stats-card.week .stats-icon {
            color: #26A69A;
        }
        
        .stats-card.month .stats-icon {
            color: #66BB6A;
        }
        
        /* 图表卡片样式 */
        .chart-card {
            background-color: rgba(10, 25, 41, 0.8);
            border: 1px solid rgba(102, 204, 255, 0.2);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            margin-bottom: 20px;
            padding: 15px;
            height: 350px;
            position: relative;
            backdrop-filter: blur(10px);
            transition: all 0.3s;
        }
        
        .chart-card:hover {
            box-shadow: 0 6px 25px rgba(33, 150, 243, 0.2);
            border-color: rgba(102, 204, 255, 0.4);
        }
        
        .chart-title {
            font-size: 16px;
            color: #81D4FA;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(102, 204, 255, 0.2);
            display: flex;
            align-items: center;
        }
        
        .chart-title::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 16px;
            background: linear-gradient(to bottom, #00b0ff, #3d5afe);
            margin-right: 10px;
            border-radius: 3px;
        }
        
        .chart-container {
            height: calc(100% - 40px);
            width: 100%;
        }
        
        /* 页脚 */
        .footer {
            margin-top: auto;
            text-align: center;
            padding: 15px;
            color: #4FC3F7;
            font-size: 14px;
            border-top: 1px solid rgba(102, 204, 255, 0.2);
        }
        
        /* 动态光线扫描效果 */
        .scan-line {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, 
                transparent, 
                rgba(0, 176, 255, 0.1), 
                rgba(0, 176, 255, 0.3), 
                rgba(0, 176, 255, 0.1), 
                transparent);
            animation: scan 5s infinite;
        }
        
        @@keyframes scan {
            0% {
                top: 0;
                left: -100%;
            }
            50% {
                top: 100%;
                left: 100%;
            }
            100% {
                top: 0;
                left: -100%;
            }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 科技背景 -->
    <div class="tech-bg"></div>
    <div class="glow-effect"></div>
    <div class="data-flow" id="dataFlow"></div>
    
    <div class="welcome-container">
        <!-- 页面标题 -->
        <div class="welcome-header">
            <div>
                <h1 class="welcome-title">智能分析中心</h1>
                <div class="welcome-subtitle">Enterprise Intelligence Platform · v2.0</div>
            </div>
            <div class="welcome-time" id="currentTime"></div>
        </div>
        
        <!-- 顶部统计卡片 -->
        <div class="layui-row layui-col-space20" style="margin-bottom: 20px;">
            <div class="layui-col-md3">
                <div class="stats-card weekly neon-border">
                    <span class="scan-line"></span>
                    <div class="stats-icon"><i class="layui-icon layui-icon-chart"></i></div>
                    <div class="stats-value">89.6%</div>
                    <div class="stats-period">本周系统负载</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stats-card monthly neon-border">
                    <span class="scan-line"></span>
                    <div class="stats-icon"><i class="layui-icon layui-icon-user"></i></div>
                    <div class="stats-value">12,846</div>
                    <div class="stats-period">活跃用户</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stats-card week neon-border">
                    <span class="scan-line"></span>
                    <div class="stats-icon"><i class="layui-icon layui-icon-log"></i></div>
                    <div class="stats-value">256.8K</div>
                    <div class="stats-period">数据处理量</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="stats-card month neon-border">
                    <span class="scan-line"></span>
                    <div class="stats-icon"><i class="layui-icon layui-icon-engine"></i></div>
                    <div class="stats-value">99.7%</div>
                    <div class="stats-period">系统稳定性</div>
                </div>
            </div>
        </div>

        <!-- 访问量图表 -->
        <div class="layui-row layui-col-space20" style="margin-bottom: 20px;">
            <div class="layui-col-md12">
                <div class="chart-card neon-border">
                    <div class="chart-title">系统访问量趋势</div>
                    <div class="chart-container" id="visitChart"></div>
                </div>
            </div>
        </div>

        <!-- 底部三个图表 -->
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md4">
                <div class="chart-card neon-border">
                    <div class="chart-title">部门数据分析</div>
                    <div class="chart-container" id="radarChart"></div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="chart-card neon-border">
                    <div class="chart-title">行业分布</div>
                    <div class="chart-container" id="pieChart"></div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="chart-card neon-border">
                    <div class="chart-title">周访问量统计</div>
                    <div class="chart-container" id="barChart"></div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            © Three.BookStore - Enterprise Resource Platform | 智能分析引擎 v2.0
        </div>
    </div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['layer'], function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            
            // 实时时间显示
            function updateTime() {
                var now = new Date();
                var timeString = now.getFullYear() + '-' + 
                                 padZero(now.getMonth() + 1) + '-' + 
                                 padZero(now.getDate()) + ' ' + 
                                 padZero(now.getHours()) + ':' + 
                                 padZero(now.getMinutes()) + ':' + 
                                 padZero(now.getSeconds());
                $('#currentTime').text(timeString);
                setTimeout(updateTime, 1000);
            }
            
            function padZero(num) {
                return num < 10 ? '0' + num : num;
            }
            
            updateTime();
            
            // 创建数据流动效果
            function createDataFlow() {
                var dataFlow = document.getElementById('dataFlow');
                var maxParticles = 20;
                
                for(var i = 0; i < maxParticles; i++) {
                    setTimeout(function() {
                        var particle = document.createElement('div');
                        particle.className = 'data-particle';
                        
                        // 随机位置
                        var startX = Math.random() * window.innerWidth;
                        var startY = Math.random() * window.innerHeight;
                        
                        // 设置样式
                        particle.style.left = startX + 'px';
                        particle.style.top = startY + 'px';
                        
                        // 随机大小
                        var size = Math.random() * 3 + 1;
                        particle.style.width = size + 'px';
                        particle.style.height = size + 'px';
                        
                        // 随机透明度
                        particle.style.opacity = Math.random() * 0.5 + 0.3;
                        
                        // 添加到DOM
                        dataFlow.appendChild(particle);
                        
                        // 动画
                        var angle = Math.random() * Math.PI * 2;
                        var speed = Math.random() * 100 + 50;
                        var dirX = Math.cos(angle) * speed;
                        var dirY = Math.sin(angle) * speed;
                        
                        var startTime = Date.now();
                        var duration = Math.random() * 5000 + 3000; // 3-8秒
                        
                        function animate() {
                            var elapsed = Date.now() - startTime;
                            var progress = elapsed / duration;
                            
                            if(progress >= 1) {
                                if(particle.parentNode === dataFlow) {
                                    dataFlow.removeChild(particle);
                                }
                                return;
                            }
                            
                            var currentX = parseFloat(particle.style.left) + dirX * progress / 100;
                            var currentY = parseFloat(particle.style.top) + dirY * progress / 100;
                            
                            particle.style.left = currentX + 'px';
                            particle.style.top = currentY + 'px';
                            
                            requestAnimationFrame(animate);
                        }
                        
                        requestAnimationFrame(animate);
                    }, i * 200); // 每隔200ms创建一个粒子
                }
                
                // 每隔一段时间重新创建粒子
                setTimeout(createDataFlow, 8000);
            }
            
            // 初始化数据流效果
            createDataFlow();
            
            // 点击卡片的事件
            $('.stats-card').on('click', function(){
                var period = $(this).find('.stats-period').text();
                layer.msg('您选择了: ' + period, {
                    offset: 't',
                    anim: 2,
                    time: 2000,
                    skin: 'layui-layer-molv'
                });
            });
            
            // 定义图表颜色
            var colors = {
                primary: '#00B0FF',
                secondary: '#4FC3F7',
                success: '#26A69A',
                warning: '#FFAB40',
                danger: '#FF5252',
                purple: '#7E57C2',
                pink: '#EC407A',
                cyan: '#00BCD4'
            };
            
            // 折线图 - 访问量
            var visitChart = echarts.init(document.getElementById('visitChart'));
            var visitOption = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(15, 35, 60, 0.7)',
                    borderWidth: 0,
                    textStyle: { color: '#E1F5FE' }
                },
                legend: {
                    data: ['访问量', '用户数'],
                    textStyle: { color: '#B3E5FC' },
                    right: '5%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['06-12', '06-13', '06-14', '06-15', '06-16', '06-17', '06-18'],
                    axisLine: {
                        lineStyle: { color: 'rgba(102, 204, 255, 0.3)' }
                    },
                    axisLabel: { color: '#B3E5FC' }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(102, 204, 255, 0.2)'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: { color: '#B3E5FC' }
                },
                series: [{
                    name: '访问量',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: colors.primary,
                        width: 3,
                        shadowColor: 'rgba(0, 176, 255, 0.5)',
                        shadowBlur: 10
                    },
                    itemStyle: {
                        color: colors.primary,
                        borderColor: '#FFF',
                        borderWidth: 2
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 176, 255, 0.5)'
                        }, {
                            offset: 1,
                            color: 'rgba(0, 176, 255, 0.1)'
                        }])
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                }, {
                    name: '用户数',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: colors.purple,
                        width: 3,
                        shadowColor: 'rgba(126, 87, 194, 0.5)',
                        shadowBlur: 10
                    },
                    itemStyle: {
                        color: colors.purple,
                        borderColor: '#FFF',
                        borderWidth: 2
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(126, 87, 194, 0.5)'
                        }, {
                            offset: 1,
                            color: 'rgba(126, 87, 194, 0.1)'
                        }])
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                }]
            };
            visitChart.setOption(visitOption);
            
            // 雷达图 - 部门数据
            var radarChart = echarts.init(document.getElementById('radarChart'));
            var radarOption = {
                backgroundColor: 'transparent',
                tooltip: {
                    backgroundColor: 'rgba(15, 35, 60, 0.7)',
                    borderWidth: 0,
                    textStyle: { color: '#E1F5FE' }
                },
                legend: {
                    data: ['实际支出', '预期支出'],
                    textStyle: { color: '#B3E5FC' },
                    right: '5%',
                    top: '5%'
                },
                radar: {
                    indicator: [
                        { name: '销售', max: 100, color: '#B3E5FC' },
                        { name: '市场', max: 100, color: '#B3E5FC' },
                        { name: '研发', max: 100, color: '#B3E5FC' },
                        { name: '客服', max: 100, color: '#B3E5FC' },
                        { name: 'IT', max: 100, color: '#B3E5FC' },
                        { name: '行政', max: 100, color: '#B3E5FC' }
                    ],
                    shape: 'circle',
                    splitNumber: 4,
                    axisName: {
                        color: '#B3E5FC'
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(0, 176, 255, 0.05)', 'rgba(0, 176, 255, 0.1)', 'rgba(0, 176, 255, 0.15)', 'rgba(0, 176, 255, 0.2)']
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(102, 204, 255, 0.3)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(102, 204, 255, 0.3)'
                        }
                    }
                },
                series: [{
                    name: '部门预算分配',
                    type: 'radar',
                    data: [
                        {
                            value: [80, 70, 90, 80, 85, 70],
                            name: '实际支出',
                            lineStyle: {
                                color: colors.primary,
                                width: 2,
                                shadowColor: 'rgba(0, 176, 255, 0.5)',
                                shadowBlur: 10
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 176, 255, 0.5)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 176, 255, 0.1)'
                                }])
                            },
                            symbolSize: 8
                        },
                        {
                            value: [50, 60, 70, 60, 75, 65],
                            name: '预期支出',
                            lineStyle: {
                                color: colors.purple,
                                width: 2,
                                shadowColor: 'rgba(126, 87, 194, 0.5)',
                                shadowBlur: 10
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(126, 87, 194, 0.5)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(126, 87, 194, 0.1)'
                                }])
                            },
                            symbolSize: 8
                        }
                    ]
                }]
            };
            radarChart.setOption(radarOption);
            
            // 饼图 - 行业分布
            var pieChart = echarts.init(document.getElementById('pieChart'));
            var pieOption = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    backgroundColor: 'rgba(15, 35, 60, 0.7)',
                    borderWidth: 0,
                    textStyle: { color: '#E1F5FE' }
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 10,
                    textStyle: { color: '#B3E5FC' },
                    data: ['制造业', '科技', '金融', '贸易', '其他']
                },
                series: [{
                    name: '行业分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '45%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: 'rgba(10, 25, 41, 0.8)',
                        borderWidth: 2,
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 176, 255, 0.3)'
                    },
                    label: {
                        show: false,
                        position: 'center',
                        color: '#E1F5FE'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold',
                            color: '#E1F5FE'
                        },
                        itemStyle: {
                            shadowBlur: 20,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 176, 255, 0.8)'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 45, name: '制造业', itemStyle: { color: colors.primary } },
                        { value: 27, name: '科技', itemStyle: { color: colors.purple } },
                        { value: 15, name: '金融', itemStyle: { color: colors.cyan } },
                        { value: 8, name: '贸易', itemStyle: { color: colors.warning } },
                        { value: 5, name: '其他', itemStyle: { color: colors.danger } }
                    ]
                }]
            };
            pieChart.setOption(pieOption);
            
            // 柱状图 - 周访问量
            var barChart = echarts.init(document.getElementById('barChart'));
            var barOption = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: 'rgba(15, 35, 60, 0.7)',
                    borderWidth: 0,
                    textStyle: { color: '#E1F5FE' }
                },
                legend: {
                    data: ['桌面端', '移动端', 'API'],
                    textStyle: { color: '#B3E5FC' },
                    top: 5
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    axisLine: {
                        lineStyle: { color: 'rgba(102, 204, 255, 0.3)' }
                    },
                    axisLabel: { color: '#B3E5FC' }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(102, 204, 255, 0.2)'
                        }
                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { color: '#B3E5FC' }
                },
                series: [
                    {
                        name: '桌面端',
                        type: 'bar',
                        stack: 'total',
                        barWidth: '50%',
                        itemStyle: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: colors.success },
                                { offset: 1, color: 'rgba(38, 166, 154, 0.5)' }
                            ]),
                            shadowColor: 'rgba(38, 166, 154, 0.5)',
                            shadowBlur: 10
                        },
                        data: [150, 120, 180, 350, 390, 330, 220]
                    },
                    {
                        name: '移动端',
                        type: 'bar',
                        stack: 'total',
                        itemStyle: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: colors.purple },
                                { offset: 1, color: 'rgba(126, 87, 194, 0.5)' }
                            ]),
                            shadowColor: 'rgba(126, 87, 194, 0.5)',
                            shadowBlur: 10
                        },
                        data: [80, 30, 250, 310, 350, 150, 120]
                    },
                    {
                        name: 'API',
                        type: 'bar',
                        stack: 'total',
                        itemStyle: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: colors.primary },
                                { offset: 1, color: 'rgba(0, 176, 255, 0.5)' }
                            ]),
                            shadowColor: 'rgba(0, 176, 255, 0.5)',
                            shadowBlur: 10
                        },
                        data: [50, 40, 120, 280, 220, 180, 150]
                    }
                ]
            };
            barChart.setOption(barOption);
            
            // 窗口大小变化时，重新调整图表大小
            window.addEventListener('resize', function() {
                visitChart.resize();
                radarChart.resize();
                pieChart.resize();
                barChart.resize();
            });
        });
    </script>
</body>
</html>